<template>
	<view class="videodetail">
		<view class="swiper-box">
			<swiper class="swiper" :vertical="true" :indicator-dots="true" :current="0" :circular="true"
				@change="change" @touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="(item,index) in vlist">
					<!-- 	<video :src="item.url" :controls="false" :loop="true" @click="click"></video> -->
					<view class="swiper-item">
						<videoPlayer ref="player" :video="item" :idx="index"></videoPlayer>
						
					</view>
				</swiper-item>


			</swiper>
		</view>




	</view>
</template>

<script>
	export default {

		data() {
			return {

				play: false,
				vId: "",
				vlist:"",
				vList1: [{
						id: "1",
						title: "俄军击毙乌女狙击手",
						source: "百度新闻",
						zan:'56',
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/90c21252-00a5-444e-bde0-7551c3da9050.mp4",
					}
				],
				vList2: [{
						id: "2",
						title: "当苹果遇上磁铁",
						source: "科学快讯",
						zan:'88',
						url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9de17fea-2142-4abf-ac2c-77c7395060eb/0d744681-0f47-4b39-b369-1cb4a1a6dae7.mp4",
					},

				]
			}
		},
		methods: {

			change(event) {
				console.log("这里!!" + event.detail.current)
				this.cur = event.detail.current
				// #ifndef H5
				clearTimeout(time)
				time = setTimeout(() => {
					if (this.pageStartY > this.pageEndY) {
						console.log("向上滑动")

						this.$refs.player[this.cur].player()
						this.$refs.player[this.cur - 1].pause()
						this.pageStartY = 0
						this.pageEndY = 0
					} else {
						console.log("向下滑动")

						this.$refs.player[this.cur].player()
						this.$refs.player[this.cur + 1].pause()
						this.pageStartY = 0
						this.pageEndY = 0
					}
				}, 100) // #endif
			},

			touchStart(e) {
				console.log("滑动：" + e.changedTouches[0]['clientY']);
				this.pageStartY = event.changedTouches[0]['clientY'];

			},
			touchEnd(e) {
				console.log("这里值" + e.changedTouches[0]["clientY"]);
				this.pageEndY = event.changedTouches[0]["clientY"];
			},


			click() {
				if (this.play === false) {
					this.playerThis()
				} else {
					this.pause()
				}
			},

		
	player() {
			if (this.play === false) {
				this.videoContext.seek(0)
				this.videoContext.play()
				this.play = true

			}
		},
		pause() {
			if (this.play === true) {
				this.videoContext.pause()

				this.play = false

			}

		},
		playerThis() {
			if (this.play === false) {
				this.videoContext.play()
				this.play = true

			}

		},
		async requestVideo() {
			uni.request({
				method: 'POST',
				data: {
					id:this.vId
				},
				url: 'http://127.0.0.1:3000/video',
				success: res => {
					this.vlist = res.data
					console.log(res.data)
				}
			})
		},
	},
	onLoad(options) {
		console.log(options.id)
		this.vId = options.id
		
		this.requestVideo()
	}


	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.videodetail {
		width: 100%;
		height: 100%;

		.swiper-box {
			width: 100%;
			height: 100%;
			background-color: $uni-bg-color-grey;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					video {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
